require(["./config"], () => {
  require(["template", "header", "footer"], template => {
    class Shopping {
      constructor() {
        this.init();
        //绑定事件
        this.eventTouch();
      }
      //初始渲染页面
      init() {
        // 根据localStorage的数据去渲染页面
        const cartList = window.localStorage.getItem("cart");
        // 判读那购物车是否为空
        if (cartList) {
          // 渲染table
          this.cartList = JSON.parse(cartList);

          $("#shoplist").html(
            template("shoptemplate", { cartList: this.cartList })
          );
          //调用计算价格和数量的方法
          this.calNumandPrice();
        } else {
          // 代表购物车没有数据
          $(".shopBox").hide();
          $(".shopEmpty").show();
        }
      }
      calNumandPrice() {
        //总价和总商品数量
        let numall = 0;
        $(".select .shopnum span").each(function() {
          numall += $(this).text() - 0;
        });
        const $numall = $(".numall");
        $numall.text(numall);
        //计算总价
        let priceall = 0;
        $(".select .shopallprice span").each(function() {
          priceall += $(this).text() - 0;
        });
        const $priceall = $(".priceall");
        $priceall.text(priceall.toFixed(2));
      }
      eventTouch() {
        const that = this;
        //点击删除事件
        $(".shoplist .del").on("click", function() {
          const shopid = $(this)
            .parents(".shoplist")
            .attr("shopid");
          const versionIndex = $(this)
            .parents(".shoplist")
            .attr("versionIndex");
          console.log(shopid, versionIndex);
          $(this)
            .parents(".shoplist")
            .remove(); //DOM中进行删除
          that.calNumandPrice(); //重新计算价格/*  */
          //删除local Storage中的信息
          let arrIndex;
          that.cartList.forEach((item, index) => {
            if (item.id == shopid && item.versionIndex == versionIndex) {
              arrIndex = index;
            }
          });
          console.log(arrIndex, that.cartList);
          if (arrIndex || arrIndex === 0) {
            that.cartList.splice(arrIndex, 1);
          }
          //这里可以存储到window.localStorage.getItem("cart");即可
        });
        //点去复选框
        $(".shoplist input:checkbox").on("click", function() {
          const flag = $(this).prop("checked");
          if (flag) {
            $(this)
              .parents(".shoplist")
              .addClass("select");
          } else {
            $(this)
              .parents(".shoplist")
              .removeClass("select");
          }
          that.calNumandPrice();
          // 判断是否全被勾选 全被勾选   标记全选沟洫那
          // console.log($(".shoplist input:checkbox"))
          // console.log(Array.from($(".shoplist input:checkbox")))
          const isAllSelect = Array.from($(".shoplist input:checkbox")).every(
            item => {
              return $(item).prop("checked");
            }
          );
          // console.log(isAllSelect)
          if (isAllSelect) {
            $(".allselect").prop("checked", true);
          } else {
            $(".allselect").prop("checked", false);
          }
        });
        //全选
        $(".allselect").on("click", function() {
          const flag = $(this).prop("checked");
          const $inputselect = $(".inputselect");
          console.log($inputselect);
          if (flag) {
            $inputselect.prop("checked", true);
            $inputselect.parents(".shoplist").addClass("select");
          } else {
            $inputselect.prop("checked", false);
            $inputselect.parents(".shoplist").removeClass("select");
          }
          that.calNumandPrice();
        });
        // 加减事件
        // -
        $(".down").on("click", function() {
          let $down = $(this).next();
          if ($down.text() >= 2) {
            let num = $down.text() - 1;
            $down.text(num);
            const index = $(this)
              .parents(".shoplist")
              .index();
           const singleprice = $('.shoplist').eq(index).children().eq(3).children().text()-0
            $('.shoplist').eq(index).children().eq(5).children().text((num * singleprice).toFixed(2))
            that.calNumandPrice();
          } else {
            alert("最小为1");
          }
        });
        //+
        $(".up").on("click", function() {
          let $up = $(this).prev();
          let num = $up.text() - 0 +1;
          $up.text(num);
          const index = $(this)
          .parents(".shoplist")
          .index();
          const singleprice = $('.shoplist').eq(index).children().eq(3).children().text()-0
          $('.shoplist').eq(index).children().eq(5).children().text((num * singleprice).toFixed(2))
          that.calNumandPrice();
        });
      }
    }
    return new Shopping();
  });
});
